<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            user-select: none;  
        }
        .right{
            font-size: 12px;
            color: green;
        }
        .err{
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>
            <label for="user">用户名:</label>
            <input type="text" id="user" placeholder="用户名">
            <span id="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" id="pwd">
            <span id="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" id="phone">
            <span id="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" id="email">
            <span id="email_span"></span>
        </p>
        <p>
            <input type="submit" id="btn" value="注册">
        </p>
    </div>
</body>

<script>

    // 1. 获取元素 
    var userInp = document.getElementById("user");
    var userSpan = document.getElementById("user_span");

    var pwdInp = document.getElementById("pwd");
    var pwdSpan = document.getElementById("pwd_span");

    var phoneInp = document.getElementById("phone");
    var phoneSpan = document.getElementById("phone_span");

    var emailInp = document.getElementById("email");
    var emailSpan = document.getElementById("email_span");

    var btn = document.getElementById("btn");


    // 用户名:   由数字,字母 下划线组成,6-12位,且不能以数字开头
    // 一步到位
    // userInp.onblur = function(){
    //     var user = userInp.value.trim();
    //     userInp.value = user;
        
    //     var reg = /^[a-zA-Z_]\w{5,11}$/;

    //     if(reg.test(user)){
    //         userSpan.textContent = "√";
    //         userSpan.className = "right";
    //     }else{
    //         userSpan.textContent = "用户名由数字、字母、下划线组成,6-12位,且不能以数字开头";
    //         userSpan.className = "err";
    //     }
    // }



     // 用户名:   由数字,字母 下划线组成,6-12位,且不能以数字开头
    // 一步到位
    userInp.onblur = function(){
        var user = userInp.value.trim();
        userInp.value = user;
        
        var lenReg = /^.{6,12}$/;    //长度
        var startReg = /^[^0-9]/;    // 非数字开头
        var illReg = /[^\w]/;        //是否含有非法字符 

        // if(lenReg.test(user)){
        //     if(startReg.test(user)){
        //         if(!illReg.test(user)){  //  illReg.test(user) == false 不含有非法字符
        //             userSpan.textContent = "√";
        //             userSpan.className = "right";
        //         }else{  // 含有非法字符
        //             userSpan.textContent = "用户名由数字、字母、下划线组成";
        //             userSpan.className = "err";
        //         }
        //     }else{
        //         userSpan.textContent = "用户名不能以数字开头";
        //         userSpan.className = "err";
        //     }
            
        // }else{
        //     userSpan.textContent = "用户名需要在6-12位之间";
        //     userSpan.className = "err";
        // }

        if(!lenReg.test(user)) { // lenReg.test(user)==false
            userSpan.textContent = "用户名需要在6-12位之间";
            userSpan.className = "err";
        }else if(!startReg.test(user)){ // startReg.test(user) == false
            userSpan.textContent = "用户名不能以数字开头";
            userSpan.className = "err";
        }else if(illReg.test(user)){ // illReg.test(user) == true   含有非法字符
            userSpan.textContent = "用户名由数字、字母、下划线组成";
            userSpan.className = "err";
        }else{
            userSpan.textContent = "√";
            userSpan.className = "right";
        }
        

    }



</script>

</html>